<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
        <button onclick="addRow(1)">添加行</button>
        <button onclick="addCol(0)">添加列</button>
    </div>
    <table id="table" border="1" style="width: 100%;">
      <thead>
        <tr>
          <th style="width:150px">Item</th>
          <th>Value</th>
          <th>beizhu</th>
        </tr>
      </thead>
      <tbody>
        <tr draggable="true">
          <td>Item 1</td>
          <td>100</td>
          <td>100</td>
        </tr>
        <tr draggable="true">
          <td>Item 2</td>
          <td>100</td>
          <td>200</td>
        </tr>
        <tr draggable="true">
          <td>Item 3</td>
          <td>100</td>
          <td>300</td>
        </tr>
      </tbody>
    </table>
    <script>
      const table = document.getElementById("table");
     function addRow(i){
        let newRow=document.createElement("TR");
        console.warn(newRow);
        newRow.innerHTML=table.rows[i].innerHTML;
        table.insertBefore(newRow,null)
     }
     function addCol(i){
        for(let j=0;j<table.rows.length;j++){
            let row=table.rows[j];
            if(row.parentNode?.tagName=="THEAD"){
                let td=document.createElement("TH");
                td.innerHTML=i;
                row.insertBefore(td,null);
            }else{
                let td=table.rows[j].insertCell(-1);
                td.innerHTML=i;
            }
           
        }
     }
    </script>
  </body>
</html>
